<template>
  <div class="MainHeader">
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">Home</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的学习项目</template>
          <el-menu-item index="2-1"><a href="http://element-cn.eleme.io" target="_blank">饿了么组件库</a></el-menu-item>
          <el-menu-item index="2-2"><a href="https://cn.vuejs.org" target="_blank">vue.js</a></el-menu-item>
          <el-menu-item index="2-3"><a href="https://www.imooc.com" target="_blank">慕课天地</a></el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">动态路由切换</template>
          <el-menu-item index="3-1">路由A</el-menu-item>
          <el-menu-item index="3-2">路由B</el-menu-item>
        </el-submenu>
        <el-menu-item index="4">嵌套路由</el-menu-item>
        <el-menu-item index="5">页面One</el-menu-item>
        <el-menu-item index="6">页面Two</el-menu-item>
        <el-menu-item index="7">页面Three</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MainHeader',
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      switch (key) {
        case '1':
          this.$router.push('/')
          break
        case '3-1':
          this.$router.push('/page/router-A')
          break
        case '3-2':
          this.$router.push('/page/router-B')
          break
        case '4':
          this.$router.push('/insertRouter')
          break
        case '5':
          this.$router.push('/pageone')
          break
        case '6':
          this.$router.push('/pagetwo')
          break
        case '7':
          this.$router.push('/pagethree')
          break
      }
    }
  }
}
</script>
<style scoped>

</style>
